/**
 * 性能优化增强样式
 * Performance Enhancement Styles
 */

/* ===== GPU加速优化 ===== */
/* 为所有动画元素添加GPU加速 */
.transition-main,
.transition-leaving,
.onload-animation,
.transition-slide-in,
.card-animation,
.enhanced-fade-in,
.sidebar-animate,
.card-animate,
.post-content-animate,
.navbar-animate,
.footer-animate,
.button-enhance,
.link-enhance,
.image-animate,
.search-animate,
.tag-animate,
.pagination-animate,
#navbar > div,
.dropdown-content,
.float-panel,
#display-setting,
#nav-menu-panel,
#mobile-toc-panel,
#search-panel {
  /* GPU加速 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  /* 渲染优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ===== 滚动性能优化 ===== */
/* 优化滚动容器 */
html {
  /* 启用硬件加速滚动 */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* 固定定位元素优化 */
#navbar,
#navbar-wrapper,
.back-to-top-btn,
.toc-wrapper {
  /* 强制创建新的合成层 */
  transform: translateZ(0);
  will-change: transform;
  /* 移除contain属性，避免影响下拉面板的显示 */
  contain: none;
}

/* ===== 动画性能优化 ===== */
/* 优化动画性能 */
@media (prefers-reduced-motion: no-preference) {
  /* 为动画元素添加性能优化 */
  .transition-main,
  .transition-leaving,
  .onload-animation,
  .transition-slide-in,
  .card-animation,
  .enhanced-fade-in,
  .sidebar-animate,
  .card-animate,
  .post-content-animate,
  .navbar-animate,
  .footer-animate {
    /* 动画性能优化 */
    will-change: transform, opacity;
    /* 移除contain属性，避免影响子元素的显示 */
    contain: none;
  }
}

/* 动画完成后清理 */
.animation-complete {
  will-change: auto;
  contain: none;
}

/* ===== 图片加载优化 ===== */
/* 图片懒加载优化 - 只针对装饰性图片 */
img:not(.interactive):not([onclick]):not([data-clickable]) {
  /* 图片渲染优化 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;

  /* 防止图片拖拽 */
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

/* 交互式图片保持可点击 */
img.interactive,
img[onclick],
img[data-clickable] {
  pointer-events: auto;
  cursor: pointer;
}

/* 图片加载动画优化 */
.image-animate {
  /* 预加载优化 */
  content-visibility: auto;
  contain-intrinsic-size: 200px;
}

/* ===== 文字渲染优化 ===== */
/* 优化文字渲染性能 - 只针对非交互元素 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
li,
td,
th {
  /* 文字渲染优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* 减少重排 */
  contain: layout style;
}

/* 链接保持可交互 */
a {
  /* 文字渲染优化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* 保持交互性 */
  pointer-events: auto;
  cursor: pointer;
}

/* ===== 响应式性能优化 ===== */
/* 移动端性能优化 */
@media (max-width: 768px) {
  /* 减少移动端重绘 */
  .card-base,
  .widget-container,
  .post-card-item {
    contain: layout style paint;
  }

  /* 优化触摸响应 */
  button,
  .btn-card,
  .btn-plain,
  .btn-regular {
    touch-action: manipulation;
    -webkit-touch-callout: none;
  }

  /* 链接保持可选择文本 */
  a {
    touch-action: manipulation;
    -webkit-touch-callout: none;
    /* 保持文本选择功能 */
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
  }
}

/* ===== 滚动条优化 ===== */
/* 自定义滚动条性能优化 */
::-webkit-scrollbar {
  /* 滚动条性能优化 */
  -webkit-appearance: none;
  background: transparent;
  width: 10px; /* 减小滚动条宽度 */
  height: 6px; /* 减小滚动条高度 */
}

::-webkit-scrollbar-thumb {
  /* 滚动条拖拽优化 */
  -webkit-appearance: none;
  background: var(--scrollbar-bg);
  border-radius: 10px; /* 减小圆角半径 */
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-bg-hover);
}

::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-bg-active);
}

::-webkit-scrollbar-track {
  background: transparent !important;
  background-color: transparent !important;
}


/* ===== 选择优化 ===== */
/* 文本选择性能优化 */
::selection {
  background-color: var(--selection-bg);
  /* 选择性能优化 */
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/* ===== 焦点优化 ===== */
/* 焦点性能优化 */
:focus-visible {
  /* 焦点性能优化 */
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ===== 打印优化 ===== */
/* 打印时禁用动画 */
@media print {
  * {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
